import React,{Component}  from 'react'

export default class Demo03_live extends Component {
  constructor(props){
    super(props)
    console.log(props);
    this.state={
      data:this.props.title,
      setnumber:22
    }
  }
//在渲染前调用,在客户端也在服务端。
  componentWillMount(){
    console.log('componentWillMount')
  }
  //在第一次渲染后调用，只在客户端。
  // 之后组件已经生成了对应的DOM结构，
  // 可以通过this.getDOMNode()来进行访问。
  // 如果你想和其他JavaScript框架一起使用，
  // 可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
  componentDidMount(){
    console.log('componentDidMount');
    //this.props.fun(111111111111)
  }
  //在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
  }
//返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
// 可以在你确认不需要更新组件时使用。
//   shouldComponentUpdate(){
//     //console.log('shouldComponentUpdate');
//   }
  //在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  componentWillUpdate(){
    console.log('componentWillUpdate');
  }
  //在组件完成更新后立即调用。在初始化时不会被调用。
  componentDidUpdate(){
    console.log('componentDidUpdate');
  }
 //在组件从 DOM 中移除的时候立刻被调用。
  componentWillUnmount(){
    console.log("componentWillUnmount");
  }


  /*定义点击事件*/

  handleClick(){
    console.log('点击事件')
    //console.log(this.props.fun);
    let message = '我是子组件的message';
    //console.log(this)
    //通过props 调父组件中的穿过的来的方法，就要bind this
    var number = this.state.setnumber;
    number++;
    console.log(number);
    this.setState({
      setnumber:number
    });
    this.props.fun(number);
  }

  render(){
    return (
        <div className="children_container">
          <div>
            我是子组件
            <h6>{this.state.data}*{this.props.title}</h6>
            <button onClick={this.handleClick.bind(this)}>点击事件</button>
          </div>
        </div>
    );
  }
}